<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<!-- <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
		
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<!-- <script text="text/javascript">
			function getsystopic(){
				alert("现在这里是空白，以后可能会说点啥哈！");
			}
		</script> -->
		
		<style type="text/css">
			body{
				background: white;
			}
			
			#log{
				margin-top: 10%;
				text-align: center;
			}
			
			.fun{
				float: left;
				width: 30%;
				text-align: center;
				
				margin-left: 3%;
			}
			
			#appdownload{
				text-align: center;
				margin-top: 10%;
				margin-bottom: 10%;
			}
			
			.p1{
				font-size: 50px;
				-webkit-text-size-adjust: none;
			}
			.p2{
				font-size: 40px;
				-webkit-text-size-adjust: none;
			}
			
			
			.fp2{
				width: 80%;
				margin-bottom: 20%;
			}
			
			.nora{
				text-decoration: none;
				color: black;
			}
			
			#systopicdiv{
				width: 100%;
				height: 100px;
				text-align: center;
				
			}
			
			#page2{
				text-align: center;
			}
			#page2content1{
				word-break: break-all;
				
				margin-top: 30%;
				
				float: left;
				margin-left: 5%;
				margin-right: 5%;
				
				margin-bottom: 5%;
			}
			#page2content2{
				float: right;
				margin-right: 5%;
				
				margin-bottom: 70%;
			}
			#page2getit{
				width: 80%;
			}
			
			
			
			#page3{
				text-align: center;
			}
			#page3content1{
				margin-top: 30%;
				
				float: left;
				margin-left: 5%;
				
				margin-bottom: 5%;
			}
			#page3content2{
				float: right;
				margin-right: 5%;
				
				margin-bottom: 70%;
			}
			#page3lesgo{
				width: 80%;
			}
			#page3back{
				width: 80%;
				margin-top: 6%;
			}
			
			
		</style>
	</head>
	<body>
		<div id="app">
			<transition name="el-zoom-in-center">
				<div id="page2"  v-if="!show && show2">
					<p class="p1" id="page2content1">{{ content }}</p>
					<p class="p1" id="page2content2">——刚才外面人多，给各位跪下了</p>
					<el-button id="page2getit" type="primary" round class="p1" onclick="app.show = !app.show">知道了~</el-button>
				</div>
			</transition>
			
			<div id="page3" v-if="!show && !show2">
				<p class="p1" id="page3content1">{{ content2 }}</p>
				<p class="p1" id="page3content2">{{ content3 }}</p>
				<a class="nora" v-bind:href="url">
					<el-button id="page3lesgo" type="primary" round class="p1">走吧</el-button>
				</a>
				<el-button id="page3back" type="primary" round class="p1" onclick="app.show = !app.show; app.show2 = !app.show2;">返回首页</el-button>
			</div>
			
			<transition name="el-zoom-in-center">
				<div id="log"  v-if="show">
					<el-image src="https://anything-1302777070.file.myqcloud.com/log.png" fit="fill" :size="1000">
						<div slot="error" class="image-slot">
						    <i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
					<!-- <img src="img/log.png" width="1000px"/> -->
					<p class="p1">小帮手</p>
					<p class="p1">Little helper</p>
				</div>
			</transition>
			
			<transition name="el-zoom-in-center">
				<div class="fun" v-if="show">
					<!-- <a class="nora" href="anything.html"> -->
						<el-button type="primary" round class="p1 fp2 el-icon-s-promotion" v-on:click="setanything()">墙贴</el-button>
						<!-- <p class="p1 fp" >墙贴</p> -->
					<!-- </a> -->
				</div>
			</transition>
			<transition name="el-zoom-in-center">
				<div class="fun" v-if="show">
					<!-- <a class="nora" href="help.html"> -->
						<el-button type="primary" round class="p1 fp2 el-icon-s-opportunity" v-on:click="sethelp()">求助</el-button>
						<!-- <p class="p1 fp">求助</p> -->
					<!-- </a> -->
				</div>
			</transition>
			<transition name="el-zoom-in-center">
				<div class="fun" v-if="show">
					<!-- <a class="nora" href="shop.html"> -->
						<el-button type="primary" round class="p1 fp2 el-icon-shopping-bag-1" v-on:click="setshop()">商店</el-button>
						<!-- <p class="p1 fp">商店</p> -->
					<!-- </a> -->
				</div>
			</transition>
			
			<transition name="el-zoom-in-center">
				<div id="appdownload" v-if="show">
					<el-link class="p1 el-icon-download" href="https://anything-1302777070.file.myqcloud.com/littleHelper.apk" type="primary"><i>小帮手APP下载</i></el-link>
					<!-- <a class="p1" href="https://anything-1302777070.file.myqcloud.com/littleHelper.apk"><i>小帮手APP下载</i></a> -->
				</div>
			</transition>
				
			<transition name="el-zoom-in-center">
				<div id="appdownload" v-if="show">
					<p class="p2">Web端小帮手只具备部分功能<br />请使用小帮手APP体验全部功能</p>
				</div>
			</transition>
				
			<transition name="el-zoom-in-center">
				<!-- 系统通知 -->
				<div id="systopicdiv" >
					<el-button type="primary" v-if="show" round class="p1" id="systopic" onclick="app.show = !app.show">无敌帅气的管理员有话说</el-button>
					<!-- <input type="button" value="无敌牛逼的管理员有话说！" id="systopic" class="p2" onclick="app.show = !app.show" /> -->
				</div>
			</transition>
			
			<transition name="el-zoom-in-center">
				<!-- copyright -->
				<p align="center" v-if="show" class="p2">MingXF工作室 Copyright &copy;2022-2025</p>
			</transition>
		</div>
		
		
		
		
		<!-- 点击墙贴，除log图片外全部动画消失，动画显示：
			西瓜！西瓜！快来吃瓜！
								————各大学校表白墙（文字）
			GET IT！（按钮）
			
			点击求助，除log图片外全部动画消失，动画显示
			遇到困难了吗？我们这......
								————无敌牛逼的管理员（文字）
			GET IT!（按钮）
			
			点击商店，除log图片外全部动画消失，动画显示
			你有什么东西值得上帝为你支付报酬？
								————天使般帅气的管理员2
			GET IT!（按钮）
		-->
		
		<script type="text/javascript">
			var app = new Vue({
				el : '#app',
				data: {
					show : true,
					show2 : true,
					// content : "建议点击右上角使用游览器打开页面，qq和微信打开的页面滑动到底部无法加载数据，所以只能够看到初次加载的前n条数据",
					content : "建议点击右上角使用游览器打开页面",
					content2 : "功能介绍",
					content3 : "-------大BOSS",
					url : "fafjda.dfaf"
				},
				methods : {
					setanything : function(){
						this.show = false;
						this.show2 = false;
						this.content2 = "西瓜！西瓜！快来吃瓜！";
						this.content3 = "——各大学校表白墙";
						this.url = "anything.html";
					},
					
					sethelp : function(){
						this.show = false;
						this.show2 = false;
						this.content2 = "遇到困难了吗？我们这有。。。";
						this.content3 = "———无敌牛逼的管理员";
						this.url = "help.html";
					},
					
					setshop : function(){
						this.show = false;
						this.show2 = false;
						this.content2 = "你有什么东西值得上帝为你支付报酬？";
						this.content3 = "———超级冷酷的管理员2";
						this.url = "shop.html";
					}
				},
			});
		</script>
	</body>
</html>